<template>
  <div>
    <el-form :model="form" label-position="top">
      <el-form-item label="动态内容" prop="content">
        <mavon-editor ref="content" v-model="form.content" @imgAdd="imgAdd" />
      </el-form-item>

      <el-form-item label="点赞数" prop="likes" style="width: 50%">
        <el-input id="likes" v-model="form.likes" type="number" placeholder="可选，默认为 0"></el-input>
      </el-form-item>

      <!-- <el-form-item label="创建时间" prop="createTime">
        <el-date-picker
          v-model="form.createTime"
          type="datetime"
          placeholder="可选，默认此刻"
          :editable="false"
        ></el-date-picker>
      </el-form-item>-->

      <el-form-item style="text-align: right">
        <el-button type="info" @click="submit(0)">仅自己可见</el-button>
        <el-button type="primary" @click="submit(1)">发布动态</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { findById, create, update } from '@/api/moment'
import { upload } from '@/api/oss'
export default {
  name: 'WriteMoment',
  components: { Breadcrumb },
  data () {
    return {
      form: {
        content: '',
        likes: 0,
        isPublished: 0
      }
    }
  },
  created () {
    if (this.$route.params.id) {
      this.getMoment(this.$route.params.id)
    }
  },
  methods: {
    imgAdd (pos, $file) {
      var formdata = new FormData()
      formdata.append("file", $file)
      upload(formdata).then(res => {
        this.$refs.content.$img2Url(pos, res.data)
      })
    },
    getMoment (id) {
      findById(id).then(res => {
        this.form = res.data
      })
    },
    submit (published) {
      this.form.isPublished = published
      if (this.$route.params.id) {
        update(this.form).then(res => {
          this.msgSuccess(res.msg)
          this.$router.push('/blog/moment/list')
        })
      } else {
        create(this.form).then(res => {
          this.msgSuccess(res.msg)
          this.$router.push('/blog/moment/list')
        })
      }
    }
  }
}
</script>

<style scoped></style>
